<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./jq-3.6.0.js"></script>
    <script src="./flexible.js"></script>
    <style>
        .box {
            /* width: 375px; */
            display: flex;
            height: 14.8rem;
            font-size: .3733rem;
        }
        
        .left {
            flex: 1;
        }
        
        .right {
            flex: 3;
            overflow: auto;
        }
        
        .left>.item {
            height: 1.44rem;
            line-height: 1.44rem;
            text-align: center;
            background-color: #f3f5f7;
            /* padding-left: .1333rem; */
            border-bottom: .0267rem solid rgb(7, 17, 27, 0.1);
        }
        
        .left>.item:hover {
            background-color: rgb(255, 192, 203, 0.5);
        }
        
        .right>.item {
            height: 2.5333rem;
            /* line-height: 95px; */
            /* text-align: center; */
            /* background-color: green; */
            border-bottom: .0267rem solid rgb(7, 17, 27, 0.1);
        }
        
        .menu {
            display: flex;
            padding: .48rem;
        }
        
        .picture {
            width: 1.3333rem;
            height: 1.3333rem;
            background-color: pink;
        }
        
        .content {
            width: 4.96rem;
            height: 1.5733rem;
            margin-left: .2667rem;
        }
        
        .goodsName {
            font-size: .3733rem;
            color: rgb(7, 17, 27);
            height: .5333rem;
            background-color: pink;
        }
        
        .bottom {
            display: flex;
            justify-content: space-between;
            /* background-color: aqua; */
            margin-top: .2133rem;
        }
        
        .goodsPrice {
            font-size: .3733rem;
            color: red;
            font-weight: normal;
            height: .8rem;
            line-height: 1.0667rem;
        }
        
        .goodsNum {
            display: flex;
            justify-content: space-between;
            width: 1.6rem;
            height: .8rem;
            line-height: .8rem;
            background-color: pink;
        }
        
        .number {
            width: .7467rem;
            height: .7467rem;
            border: .0267rem solid gray;
            text-align: center;
        }
        
        .redus {
            display: none;
        }
        
        .number {
            display: none;
            margin-left: .2133rem;
        }
        
        .add {
            margin-left: auto;
        }
    </style>
</head>

<body style="margin: 0px;padding: 0px;">
    <div class="box">
        <div class="left"></div>
        <div class="right">
        </div>
    </div>
</body>
<script>
    //入口函数
    $(() => {
        getMenuList();
    });

    const getMenuList = () => {
        $.ajax({
            url: 'http://localhost:8081/menuList',
            type: 'get',
            success: (res) => {
                createMenu(res);
                getGoodsList(res)

            }
        });
    }

    const getGoodsList = (data) => {
            $.ajax({
                url: 'http://localhost:8081/goodList',
                type: 'get',
                success: (res) => {
                    createGoods(res, data);
                }
            });
        }
        //创建菜单
    const createMenu = (data) => {
        //console.log(data);//输出菜单数组
        $.each(data, (i, e) => {
            let itemDiv = $('<div class="item"></div>');
            itemDiv.html(e.name);
            itemDiv.attr('data-left-id', e.id);
            itemDiv.on('click', (e) => {
                pull($(e.target).attr('data-left-id'));
            })
            $('.left').append(itemDiv);
        })

    }



    //创建商品
    const createGoods = (data1, data2) => {
        $.each(data1, (i, e) => {
                let itemDiv = $('<div class="item"></div>');
                itemDiv.addClass('left' + e.menuId);
                $('.right').append(itemDiv);
                let menuDiv = $('<div class="menu"></div>');
                itemDiv.append(menuDiv);
                let pictureDiv = $(' <div class="picture"><img src="' + e.img + '" alt="" class="picture"></div>');
                menuDiv.append(pictureDiv);
                let contentDiv = $(' <div class="content"></div>');
                menuDiv.append(contentDiv);
                let goodsNameDiv = $('<div class="goodsName"></div>');
                goodsNameDiv.html(e.name);
                contentDiv.append(goodsNameDiv);
                let bottomDiv = $('<div class="bottom"></div>');
                contentDiv.append(bottomDiv);
                let goodsPriceDiv = $('<div class="goodsPrice"></div>');
                goodsPriceDiv.html(e.price);
                bottomDiv.append(goodsPriceDiv);
                let goodsNumDiv = $('<div class="goodsNum"><div class="redus">-</div><div class="number">0</div><div class="add">+</div></div>');
                bottomDiv.append(goodsNumDiv);


                //加减点击事件
                goodsNumDiv.children('.add').click((e) => {
                    let num = parseInt($(e.target).prev().html());
                    num += 1;
                    $(e.target).prev().html(num);
                    $(e.target).siblings().css({
                        'display': 'block'
                    })
                })
                goodsNumDiv.children('.redus').click((e) => {
                    let num = parseInt($(e.target).next().html());
                    if (num > 0) {
                        num -= 1;
                        $(e.target).next().html(num);
                    }
                    // else if (num = 0) {
                    //     $(this).css({
                    //         'display': 'none'
                    //     })
                    // }
                })

            })
            //连接菜单与商品   遍历元素
        $.each(data2, (i, e) => {
            $('.left' + e.id)[0];
            let itemDiv = $('<div class="item" style="background-color:#f3f5f7; line-height:35px;height:35px;border-top:1px solid rgb(7,17,27,0.1);border-left:2px solid #d9dde1;"></div>')
            itemDiv.addClass('left' + e.id);
            itemDiv.html(e.name);
            $($('.left' + e.id)[0]).before(itemDiv);
        })
    }

    //滚动事件
    const pull = (id) => {
        $('.left' + id)[0];
        let pageTop = $($('.left' + id)[0]).offset().top;
        $('.right').scrollTop(pageTop + $('.right').scrollTop());
    }




    const fn = () => {
        let sumNumber = 0;
        let sumMoney = 0;
        $('.add').each(function(i, e) {
            let sum = $(this).prev().html() - 0;
            sumNumber = sumNumber + sum;
            let money = $(this).parent().siblings('.price').html() - 0;
            let total = sum * money;
            sumMoney = sumMoney + total;
        });
        //跨页面赋值
    };
</script>

</html>